<template>
  <BasicModal
    width="800px"
    title="订单核查"
    v-bind="$attrs"
    @register="register"
    destroy-on-close
    :closeFunc="handleClose"
    :loading="loading"
    show
  >
    <a-descriptions bordered :column="2" size="small">
      <a-descriptions-item label="商户订单号">{{ info?.outTradeNo }}</a-descriptions-item>
      <a-descriptions-item label="系统订单号">{{ info?.orderNo }}</a-descriptions-item>
      <a-descriptions-item label="付款人姓名">{{ info?.input }}</a-descriptions-item>
      <a-descriptions-item label="订单金额/实付"
        >{{ info?.amount }}/{{ info?.money }}</a-descriptions-item
      >
      <a-descriptions-item label="支付通道">{{ info?.codeTitle }}</a-descriptions-item>
      <a-descriptions-item label="收款信息">
        <div v-html="info?.collectionInput ? formatInput(info?.collectionInput) : ''"></div>
      </a-descriptions-item>
      <a-descriptions-item label="佣金/费率"
        >{{ info?.agentGain }}/{{ info?.agentRate }}</a-descriptions-item
      >
      <a-descriptions-item label="支付状态">
        <a-tag :color="info.payStatus == 0 ? 'blue' : info.payStatus == 1 ? 'blue' : ''">{{
          formatPayStatus(info?.payStatus)
        }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="订单状态">
        <a-tag :style="getOrderColor(info?.orderStatus)">{{
          getOrderStatus(info?.orderStatus)
        }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="验证码">{{ info?.userCode }}</a-descriptions-item>
      <a-descriptions-item label="支付设备信息">{{ info?.payDeviceInfo }}</a-descriptions-item>
      <a-descriptions-item label="订单创建时间">
        {{ dayjs(info?.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
      </a-descriptions-item>
      <a-descriptions-item label="提交时间">{{
        info?.customerTime != ''
          ? dayjs(info?.customerTime * 1000).format('YYYY-MM-DD HH:mm:ss')
          : ''
      }}</a-descriptions-item>
      <a-descriptions-item label="收款二维码">
        <a-qrcode :value="info?.agentImgSrc"
      /></a-descriptions-item>
      <a-descriptions-item label="客人提交信息">
        {{ info?.displayData ? info?.displayData.join(',') : '' }}
      </a-descriptions-item>
    </a-descriptions>
    <a-row justify="center" align="middle" style="margin-top: 8px; text-align: center">
      <a-col :span="12">
        <a-button
          :loading="loading"
          v-if="info.orderType == 1"
          @click="confirmReceiptFunc"
          style="background-color: rgb(129 179 55); color: #fff"
          :disabled="time <= 0"
          >确认已收到</a-button
        >

        <a-button
          :loading="loading"
          v-if="info.orderType == 2"
          @click="reviewReceiptFunc"
          :disabled="time <= 0"
          style="background-color: rgb(129 179 55); color: #fff"
          >确认补单</a-button
        >
      </a-col>
      <a-col :span="12">
        <a-button :loading="loading" @click="cancelOrder">未收到取消订单</a-button>
      </a-col>
    </a-row>
    <a-row justify="center" align="middle" style="margin-top: 8px; text-align: center">
      <a-col :span="24">
        <a-progress :percent="percent" strokeColor="#a2f04d" status="active" :show-info="false" />
      </a-col>
      <a-col :span="24">
        <span style="color: red; font-weight: bold"
          >请在{{ time }}秒内 确认是否收到 多次超时将会受到处罚</span
        >
      </a-col>
    </a-row>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { ref, onUnmounted } from 'vue';
  import { getOrderStatus, getOrderColor } from '@/utils/order';
  import {
    ConfirmReceiptApi,
    ReviewReceiptApi,
    CloseOrderApi,
    OrderInfoApi,
  } from '@/api/collection';
  import { message, Modal } from 'ant-design-vue';
  import dayjs from 'dayjs';

  const info = ref({});
  const loading = ref(false);
  let reload = null;
  const [register, { closeModal }] = useModalInner(({ id, orderType, reloadFunc }) => {
    OrderInfoApi({ orderNo: id }).then((data) => {
      info.value = data;
      info.value.orderType = orderType;
      time.value = data.endTime;
      reload = reloadFunc;
      countDown();
    });
  });
  const time = ref(0);
  const percent = ref(0);
  let timer = 0;

  function countDown() {
    timer = setTimeout(() => {
      if (time.value > 0) {
        time.value--;
        percent.value = (1 - time.value / info.value.totalTime) * 100;
        countDown();
      } else {
        percent.value = 0;
        clearTimeout(timer);
        closeModal();
        message.error('超时未确认，订单已取消');
      }
    }, 1000);
  }

  const formatPayStatus = (status) => {
    const statusText = ['未支付', '已支付', '无信息'];
    return statusText[status];
  };

  const confirmReceiptFunc = () => {
    loading.value = true;
    Modal.confirm({
      title: '确认',
      content: '确认收款成功',
      centered: true,
      getContainer: () => document.body,
      onOk: () => {
        ConfirmReceiptApi({ orderNo: info.value.orderNo })
          .then(() => {
            clearTimeout(timer);
            reload();
            closeModal();
          })
          .finally(() => {
            loading.value = false;
          });
      },
      onCancel: () => {
        loading.value = false;
        reload();
        clearTimeout(timer);
        closeModal();
      },
    });
  };

  const reviewReceiptFunc = () => {
    loading.value = true;
    Modal.confirm({
      title: '确认',
      content: '补单成功',
      centered: true,
      getContainer: () => document.body,
      onOk: () => {
        ReviewReceiptApi({ orderNo: info.value.orderNo })
          .then(() => {
            clearTimeout(timer);
            reload();
            closeModal();
          })
          .finally(() => {
            loading.value = false;
          });
      },
      onCancel: () => {
        loading.value = false;
        reload();
        clearTimeout(timer);
        closeModal();
      },
    });
  };

  const cancelOrder = () => {
    loading.value = true;
    CloseOrderApi({ orderNo: info.value.orderNo })
      .then(() => {
        clearTimeout(timer);
        reload();
        closeModal();
      })
      .finally(() => {
        loading.value = false;
      });
  };

  const handleClose = () => {
    console.log('close');
    clearTimeout(timer);
    return true;
  };

  function formatInput(info) {
    let text = '';
    info.forEach((element) => {
      text += element.title + ':' + element.value + '<br/>';
    });
    return text;
  }

  onUnmounted(() => {
    clearTimeout(timer);
  });
</script>
